<template>
  <div>
    <nav-header></nav-header>

    <!-- 搜索部分 -->
    <header class="header-search">
      <div class="search">
        <div>
          <span class="search_text">时间：</span>
          <el-date-picker
            v-model="timeValue"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            class="search_box"
          />
        </div>

        <div>
          <span class="search_text">班级：</span>
          <el-select
            v-model="searchParams.class_id"
            clearable
            placeholder="请选择班级"
            style="width: 188px"
          >
            <el-option
              v-for="item in classOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>

        <div>
          <span class="search_text">教师：</span>
          <el-select
            v-model="searchParams.teacher_id"
            clearable
            placeholder="请选择教师"
            style="width: 188px"
          >
            <el-option
              v-for="item in teacherOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>

        <div>
          <span class="search_text">科目：</span>
          <el-select
            v-model="searchParams.subject_id"
            clearable
            placeholder="请选择科目"
            style="width: 188px"
          >
            <el-option
              v-for="item in subjectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>

        <el-button class="btn_width" type="primary" @click="handleSearch">
          搜索
        </el-button>

        <el-button type="primary" class="reset_btn" @click="handleReset">
          重置
        </el-button>
      </div>

      <div class="search_btn">
        <el-button type="primary" @click="handleVideoSet">视频设置</el-button>
        <el-button type="primary" @click="handleExport">导出数据</el-button>
        <el-button type="danger" @click="handleBatchDel">批量删除</el-button>
      </div>
    </header>

    <div>
      <el-table
        class="video_table"
        :data="listData"
        @selection-change="changeHander"
        border
        max-height="600"
        style="width: 100%"
      >
        <el-table-column type="selection" width="50" align="center" fixed />
        <el-table-column
          label="序号"
          type="index"
          :index="typeIndex"
          align="center"
          width="50"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="course_time"
          label="上课时间"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="subject_name"
          label="上课科目"
          align="center"
          show-overflow-tooltip
        />

        <el-table-column
          prop="class_name"
          label="上课班级"
          align="center"
          show-overflow-tooltip
        />

        <el-table-column
          prop="teacher_name"
          label="授课老师"
          align="center"
          show-overflow-tooltip
        />

        <el-table-column
          prop="recorder_name"
          label="录制设备名称"
          align="center"
          show-overflow-tooltip
        />

        <el-table-column
          prop="recorder_type_txt"
          label="设备型号"
          align="center"
          show-overflow-tooltip
        />

        <el-table-column
          prop="recorder_video_type_txt"
          label="视频类型"
          align="center"
          show-overflow-tooltip
        />

        <el-table-column
          prop="upload_time"
          label="上传时间"
          align="center"
          show-overflow-tooltip
        />

        <el-table-column
          prop="5"
          label="操作"
          align="center"
          width="150"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button @click="editReport(scope.row)" type="text"
              >编辑</el-button
            >

            <el-button @click="handleView(scope.row)" type="text"
              >预览</el-button
            >

            <el-button
              @click="delVideo(scope.row.course_id)"
              type="text"
              class="delete-button"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="table-pagination" v-show="searchParams.data_sum > 10">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchParams.page_index"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :page-size="searchParams.page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="searchParams.data_sum"
        >
        </el-pagination>
        <div class="pagination-button">
          <el-button
            @click="getList"
            type="primary"
            icon="el-icon-refresh"
            circle
            title="刷新数据"
            size="mini"
          >
          </el-button>
        </div>
      </div>
    </div>

    <!-- 视频设置弹窗 -->
    <el-dialog
      :visible.sync="videoModal"
      width="520px"
      title="视频设置"
      @close="handleCancel"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      center
    >
      <div class="modal_container">
        <span class="video_title">视频自动审核</span>
        <div class="video_radio">
          <div class="video_set">
            <span class="set_title">AI视频</span>
            <el-radio-group v-model="AIradio">
              <el-radio :label="1">开启</el-radio>
              <el-radio :label="0">关闭</el-radio>
            </el-radio-group>
          </div>
          <span class="video_tip">{{
            AIradio
              ? "(注意：开启后，上传至云平台的AI视频将会自动审核通过，并将自动进行视频转码，生成课程报告。)"
              : "(注意：关闭后，AI视频将会存放在视频管理-录制文件-设备录制文件列表中，需要点击批准才能审核通过，进行视频转码，生成课程报告。)"
          }}</span>
        </div>

        <div class="video_radio">
          <div class="video_set">
            <span class="common_title">普通视频</span>
            <el-radio-group v-model="commonRadio">
              <el-radio :label="1">开启</el-radio>
              <el-radio :label="0">关闭</el-radio>
            </el-radio-group>
          </div>
          <span class="video_tip">{{
            commonRadio
              ? "(注意：开启后，上传至云平台的普通视频将会自动审核通过，并将自动进行视频转码。)"
              : "(注意：关闭后，普通视频需要点击批准才能审核通过，才能进行视频转码。)"
          }}</span>
        </div>
      </div>
      <span slot="footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 预览弹窗 -->
    <el-dialog
      :visible.sync="viewModal"
      width="520px"
      title="预览"
      @close="handleCancel"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      center
    >
      <div class="view_container">
        <div
          class="video_item"
          v-for="item of videoData"
          :key="item.play_url"
          @click="showplayBox(item)"
        >
          <img
            src="../../../../static/image/affairs/ai/video_icon.png"
            alt=""
          />
          <span>{{ item.video_name }}</span>
        </div>
      </div>
    </el-dialog>

    <transition name="el-fade-in-linear">
      <div class="masking" :class="{ activeLive: isActive }">
        <div class="maskingBox">
          <div class="masking_h">
            <span>视频预览</span>
            <i class="el-icon-close" @click="viewClose"></i>
          </div>
          <div class="masking_c">
            <dplayer
              v-if="showVideoPlayer"
              :playParam.sync="playParam"
            ></dplayer>
          </div>
        </div>
      </div>
    </transition>

    <!-- 编辑弹窗 -->
    <el-dialog
      title="编辑"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="eidtModal"
      width="400px"
    >
      <el-form
        ref="formRef"
        :model="aiForm"
        :rules="rules"
        label-width="100px"
        label-position="left"
      >
        <el-form-item label="上课时间" prop="time">
          <el-date-picker
            style="width: 100% !important;"
            v-model="aiForm.time"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="学科" prop="subject_id">
          <el-select v-model="aiForm.subject_id" placeholder="请选择学科">
            <el-option
              v-for="item in subjectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="上课班级" prop="class_id">
          <el-select v-model="aiForm.class_id" placeholder="请选择上课班级">
            <el-option
              v-for="item in classOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="授课老师" prop="teacher_id">
          <el-select v-model="aiForm.teacher_id" placeholder="请选择授课老师">
            <el-option
              v-for="item in teacherOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="eidtModal = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirmEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import dplayer from "@/components/public/dplayer.vue";

export default {
  data() {
    return {
      rules: {
        subject_id: [
          { required: true, message: "请选择学科", trigger: "blur" }
        ],
        class_id: [
          { required: true, message: "请选择上课班级", trigger: "blur" }
        ],
        teacher_id: [
          { required: true, message: "请选择授课老师", trigger: "blur" }
        ],
        time: [
          {
            required: true,
            message: "请选择上课时间",
            trigger: "blur"
          }
        ]
      },

      aiForm: {
        time: [],
        subject_id: "",
        class_id: "",
        teacher_id: "",
        course_id: ""
      },

      eidtModal: false,

      playParam: { play_url: "" }, // 播放地址
      isActive: true, // 是否展示
      showVideoPlayer: false, // 是否显示播放预览视频
      AIradio: "", // 视频弹窗设置ai参数
      commonRadio: "", // 视频弹窗设置普通录制参数
      videoModal: false, // 视频设置弹窗
      viewModal: false, // 预览弹窗
      searchParams: {
        // 查询参数
        page_index: 1,
        page_size: 10,
        class_id: "",
        subject_id: "",
        teacher_id: ""
      },
      teacherOptions: [], // 教师选项
      classOptions: [], // 班级选项
      subjectOptions: [],
      listData: [], // 列表数据
      selectData: [], // 选中数据
      timeValue: [], // 时间选择器
      videoData: [] // 预览数据
    };
  },
  components: {
    dplayer
  },
  methods: {
    // 序号
    typeIndex(index) {
      return (
        index +
        (this.searchParams.page_index - 1) * this.searchParams.page_size +
        1
      );
    },
    init() {
      this.getClassOption();
      this.getTeacherOption();
      this.getSubjectOption();
      this.getList();
    },

    // 编辑报告
    editReport(row) {
      this.aiForm.course_id = row.course_id;

      const isExitTeacher = this.teacherOptions.find(
        item => item.value === row.teacher_id
      );
      if (isExitTeacher) {
        this.aiForm.teacher_id = row.teacher_id;
      } else {
        this.aiForm.teacher_id = "";
      }

      const isExitSub = this.subjectOptions.find(
        item => item.value === row.subject_id
      );
      if (isExitSub) {
        this.aiForm.subject_id = row.subject_id;
      } else {
        this.aiForm.subject_id = "";
      }

      const isExitClass = this.classOptions.find(
        item => item.value === row.class_id
      );
      if (isExitClass) {
        this.aiForm.class_id = row.class_id;
      } else {
        this.aiForm.class_id = "";
      }
      let end_time = row.end_time;
      if (row.end_time === "0000-00-00 00:00:00") {
        end_time = row.start_time;
      }

      this.aiForm.time = [row.start_time, end_time];
      this.eidtModal = true;

      console.info(this.aiForm, row);
    },

    // 编辑
    handleConfirmEdit() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          const {
            course_id,
            time,
            class_id,
            subject_id,
            teacher_id
          } = this.aiForm;
          const params = {
            course_id,
            subject_id,
            class_id,
            teacher_id,
            start_time: time[0],
            end_time: time[1]
          };

          const success = res => {
            const { status, msg } = res;

            if (status === "success") {
              this.$message.success("修改成功");
              this.eidtModal = false;
              this.getList();
            } else {
              this.$message.error(msg);
            }
          };

          this.$ajax.put("api/ainew/videoList", params, {
            func: {
              success
            }
          });
        }
      });
    },

    // 删除单个
    delVideo(id) {
      const cancel = () => {};
      const yes = () => {
        const params = {
          course_id: id
        };
        const success = res => {
          const { status, msg } = res;
          if (status === "success") {
            this.$message.success("删除成功");
            this.getList();
          } else {
            this.$message.error(msg);
          }
        };
        const fail = err => {
          this.$message.error(err);
        };
        this.$ajax.delete("api/ainew/videoList", {
          params,
          func: { success, fail }
        });
      };
      this.e_confirm({ yes: yes, cancel: cancel, txt: "确定删除所选项？" });
    },

    // 删除多个
    handleBatchDel() {
      if (this.selectData.length === 0) {
        this.$message.warning("请选择要删除的选项");
        return;
      }
      const ids = this.selectData.map(item => item.course_id);
      this.delVideo(ids);
    },

    // 获取教师选项
    getTeacherOption() {
      const success = res => {
        const { status, data } = res;
        if (status === "success") {
          this.teacherOptions = data.map(item => {
            return {
              value: item.id,
              label: item.name
            };
          });
        }
      };
      const params = {
        role_id: 6,
        status: 1
      };
      this.$ajax.get("api/user/user", { params, func: { success } });
    },

    // 获取班级选项
    getClassOption() {
      const success = res => {
        const { status, data } = res;
        if (status === "success") {
          this.classOptions = data.map(item => {
            return {
              value: item.id,
              label: item.rename
            };
          });
        }
        console.info(this.classOptions, this.searchParams);
      };
      const params = {
        status: [1]
      };
      this.$ajax.get("api/org/classes", { params, func: { success } });
    },

    // 获取科目选项
    getSubjectOption() {
      const success = res => {
        const { status, data } = res;
        if (status === "success") {
          this.subjectOptions = data.map(item => {
            return {
              value: item.subject_id,
              label: item.subject_name
            };
          });
        }
      };
      const params = {
        status: [1]
      };
      this.$ajax.get("api/cate/subject_data", { params, func: { success } });
    },

    // 取消
    handleCancel() {
      this.videoModal = false;
    },

    // 确定
    handleConfirm() {
      const { AIradio, commonRadio } = this;
      const params = {
        status_ai: AIradio,
        status_0660: commonRadio
      };
      const success = res => {
        const { status } = res;
        if (status === "success") {
          this.$message.success("修改成功~");
          this.handleCancel();
        }
      };
      this.$ajax.put("api/ainew/videoApproveRule", params, {
        func: { success }
      });
    },

    // 视频设置
    handleVideoSet() {
      this.videoModal = true;
      this.getVideoSetttingInfo();
    },

    handleView(viewData) {
      this.videoData = viewData.video_list;

      this.viewModal = true;
    },

    // 获取视频设置info
    getVideoSetttingInfo() {
      const success = res => {
        try {
          const { data, status } = res;
          if (status === "success") {
            this.AIradio = data.status_ai;
            this.commonRadio = data.status_0660;
          }
        } catch (error) {
          this.$message.error(error);
        }
      };
      this.$ajax.get("api/ainew/videoApproveRule", {
        func: { success }
      });
    },

    // 数据导出
    handleExport() {
      const { selectData } = this;
      const ids = selectData.map(item => item.course_id);

      if (ids) {
        this.searchParams.course_id = ids;
      }

      this.export_excel(
        "api/ainew/videoListExcel",
        this.searchParams,
        "视频课程管理数据"
      );
    },

    // 搜索
    handleSearch() {
      const [start_time, end_time] = this.timeValue;
      if (start_time) this.searchParams.start_time = start_time;
      if (end_time) this.searchParams.end_time = end_time;
      this.searchParams.page_index = 1;
      this.getList();
    },

    // 重置
    handleReset() {
      this.searchParams = {
        page_size: 10,
        page_index: 1
      };
      this.timeValue = [];
    },
    // 每页数量改变
    handleSizeChange(size) {
      this.searchParams.page_size = size;
      this.getList();
    },

    // 当前第几页
    handleCurrentChange(page) {
      this.searchParams.page_index = page;
      this.getList();
    },

    // 获取列表数据
    getList() {
      const success = res => {
        const { status, data } = res;
        if (status === "success") {
          const { page_index, data_sum, page_size } = data;
          this.listData = data.data;
          this.searchParams.page_index = Number(page_index);
          this.searchParams.data_sum = data_sum;
        }
      };

      this.$ajax.get("api/ainew/videoList", {
        params: this.searchParams,
        func: { success }
      });
    },

    // 表格选中
    changeHander(selectData) {
      this.selectData = selectData;
    },

    showplayBox(playInfo) {
      this.viewModal = false;
      this.videoView(playInfo.play_url);
    },

    viewClose() {
      this.viewModal = true;
      this.showVideoPlayer = false;
      this.isActive = true;
    },
    videoView(url) {
      this.playParam.play_url = url;
      this.videoType = url.substring(url.length - 3).toLowerCase();
      this.showVideoPlayer = true;
      this.isActive = false;
    }
  },
  created() {
    this.init();
  }
};
</script>
<style lang="scss" scoped>
.header-search {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .search {
    display: flex;

    div {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
    }

    .search_text {
      width: 45px;
    }

    .search_box {
      width: 188px;
    }

    .reset_btn {
      color: #7c9bb8 !important;
      background-color: #deefff !important;
      border: none;
      width: 82px;
    }

    .btn_width {
      width: 82px;
    }
  }

  .search_btn {
    display: flex;
    justify-content: end;
  }
}

.video_table {
  margin-top: 26px;
}

.date_time {
  width: 100% !important;
}

.modal_container {
  display: flex;
  flex-direction: column;

  .video_title {
    font-weight: bold;
    font-size: 14px;
    color: #000;
  }
  .video_radio {
    display: flex;
    flex-direction: column;
    margin-top: 20px;

    .video_set {
      display: flex;
      align-items: center;
      margin-bottom: 15px;

      .set_title {
        margin-right: 65px;
        color: #000;
      }

      .common_title {
        margin-right: 52px;
        color: #000;
      }
    }
    .video_tip {
      font-size: 12px;
      color: #888888;
    }
  }
}

.view_container {
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;

  .video_item {
    display: flex;
    width: 100%;
    padding: 10px;
    background-color: #f2f2f2;
    border-radius: 3px;
    margin-bottom: 10px;
    cursor: pointer;

    img {
      width: 20px;
      height: 20px;
    }
    span {
      margin-left: 10px;
    }
  }
}

.masking {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.5s;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9999;

  .maskingBox {
    position: absolute;
    top: 20%;
    left: 50%;
    width: 800px;
    margin-left: -400px;
    background: #fff;
  }

  .masking_h {
    padding: 10px 15px;
    background: #348efc;
    text-align: center;
    text-align-last: justify;

    > span,
    > i {
      font-size: 16px;
      text-align-last: initial;
      display: inline-block;
      vertical-align: middle;
      color: #fff;
    }

    > i {
      cursor: pointer;
    }
  }

  .masking_c {
    padding: 10px;
    height: 445px !important;
  }

  .rewview-tips {
    text-align: center;
    padding: 50px 0 60px;
  }
}

.activeLive {
  opacity: 0;
  visibility: hidden;
}
</style>
